<template>
    <component :is="tagType" v-bind="linkProps()">
        <slot />
    </component>
</template>

<script>
import { ValidateUtils } from '@/utils/validate';
export default {
    name: 'Link',
    props: {
        to: {
            type: String,
            required: true
        }
    },
    computed: {
        tagType() {
            return ValidateUtils.isExternalLink(this.to) ? 'a' : 'router-link';
        }
    },
    methods: {
        linkProps() {
            return ValidateUtils.isExternalLink(this.to)
                ? {
                      href: this.to,
                      target: '_blank',
                      rel: 'noopener norefferrer'
                  }
                : { to: this.to };
        }
    }
};
</script>

<style lang="scss" scoped>
a {
    color: inherit;
    display: block;
}
</style>